<template>
	<SearchTable :search='searchConfig' :table='tableConfig' :control='controlsConfig'/>
</template>

<script setup>
	const SearchTable 	= $.lazy(()=>import('#cpt/temp/SearchTable.vue'))
	/* ---------------------------  提交表单 --------------------------- */
	const controlsConfig = {
		title: '菜单管理',
		controls	: [
			{ mode:'add' },
			{ mode:'del', abs:1, api:'menu/del' },
		]
	}
	/* ---------------------------  提交表单 --------------------------- */
	const searchConfig = {
		data: [
			{ label:'名称', 	name:'title' },
			{ label:'上级菜单', name:'parentId', type:'tree-select', api:'menu', nameStr:'title', idStr:'id'},
		]
	}
	/* ---------------------------  新增、编辑 Modal --------------------------- */
	const addConfig = {
		title 		: '菜单',
		width 		: '40%',
		labelWidth 	: 's5',
		backData 	: ({ data }) => ({ disabled: data?.disabled ? 1 : 0, level: data?.level ?? 0, parentId: data?.parentId === 0 ? null : data?.parentId }),
		setParam: ({ parentId }) => ({ parentId: parentId ?? 0 }),
		data:[
			{ label:'菜单名称',  name:'title' },
			{ label:'上级菜单', name:'parentId', type:'tree-select', api:'menu', nameStr:'title', idStr:'id' },
			{ label:'排序', name:'level', type:'number', value:0 },
			{ label:'禁用', name:'disabled', type:'radio', value:0, data:[{ label:'是', value: 1 }, { label:'否', value: 0 }] },
			{ label:'路由名称', name:'name' },
			// { label:'路由地址', name:'path' },
			{ label:'组件地址', name:'component' },
		]
	}
	/* ---------------------------  表格数据 --------------------------- */
	let tableConfig = $ref({
		api 		: 'menu',					// 列表接口
		//
		// ctrApi 		: 'menu',					// 增、删，改、查一个接口
		// addApi 		: 'menu',		// 增
		// modApi 		: 'menu',		// 改
		// infoApi 	: 'menu/12',		// 查
		// delApi 		: 'menu',		// 删
		
		addConfig,			// 
		
		paging 		: 0,						// 是否分页
		clearApi 	: true,
		bordered 	: false,
		// isBtnCenter : false,
		cols		: [
			{ title: '菜单名称', 	dataIndex: 'title', width:200 },
			{ title: '路由名称', 	dataIndex: 'name', ...$fn.table.four },
			{ title: '路由排序', 	dataIndex: 'level', ...$fn.table.four },
			{ title: '访问路径', 	dataIndex: 'path', width:200 },
			{ title: '访问组件', 	dataIndex: 'component', width:100 },
			{ title: '创建人', 		dataIndex: 'createUser', ...$fn.table.name  },
			{ title: '创建时间', 	dataIndex: 'createDate', ...$fn.table.time },
			{ title: '更新时间', 	dataIndex: 'updateDate', ...$fn.table.time }
		],
		controls 	: {
			width: 240,
			data: row => [
				{ mode:'mod', config:addConfig, abs:1 }, 
				{ mode:'delPop', abs:1 },
				{ label:'添加子菜单', mode:'formModal', config: () => {
					const config = {
						...$fn.copy(addConfig), 
						title:'添加子菜单',
						r: 1,
						backData: { parentId: row.id, disabled: row.disabled ? 1 : 0, level:0 },
					}
					$fn.getRow(config, 'parentId').disabled = true
					return config
				}}
			]
		},
		row:{}
	})
</script>